<template>
  <div id="mjBox" class="centerItem" ref="dom"></div>
</template>

<script>
import echarts from "echarts";
import tdTheme from "./theme.json";
import { on, off } from "@/base/util/tools";

echarts.registerTheme("tdTheme", tdTheme);
export default {
  name: "AreaLine",
  props: {
    value: Object,
    text: String,
    subtext: String,
    xSleep: Array,
    ySleep: Array,
  },
  data() {
    return {
      dom: null,
    };
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    drawbarChart() {
      // 指定相关的配置项和数据
      let mjBoxOption = {
        color: ["#289df5", "#fbc01b", "#ff5050"],
        grid: {
          left: 24,
          right: "6%",
          bottom: "30px",
          height: "100px",
          width: "180px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          position: "top",
          axisLine: {
            show: false,
          },
          axisTick: {
            length: 0,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#051d5f"],
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            // interval: Math.ceil(this.xSleep.length/6),
            interval: "auto",
            textStyle: {
              color: "#00c5d7",
            },
          },
          //   name: "(月)",
          nameTextStyle: {
            padding: [24, 0, 0, 0],
            color: "#00c5d7",
          },
          nameGap: 0,
          data: this.xSleep,
        },
        yAxis: {
          type: "value",
          inverse: false,
          max: 4,
          splitNumber: 4,
          axisLine: {
            show: false,
          },
          axisTick: {
            length: 0, // 刻度线的长度
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#051d5f"],
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "吃饭",
            type: "line",
            smooth: true,
            symbol: "circle", // 拐点类型
            symbolSize: 0, // 拐点圆的大小
            itemStyle: {
              normal: {
                color: "#289df5", // 折线条的颜色
                borderColor: "#289df5", // 拐点边框颜色
                areaStyle: {
                  type: "default",
                  opacity: 0.1,
                },
              },
            },
            data: this.ySleep,
          },
        ],
      };
      // // 基于准备好的dom，初始化echarts实例
      // let mjBoxEchart = echarts.init(document.getElementById('mjBox'));
      // // 使用制定的配置项和数据显示图表
      // mjBoxEchart.setOption(mjBoxOption);
      // // echart图表自适应
      // window.addEventListener('resize', function () {
      //   mjBoxEchart.resize();
      // });
      this.dom = echarts.init(this.$refs.dom, "tdTheme");
      this.dom.setOption(mjBoxOption);
      on(window, "resize", this.resize);
    },
  },
  watch: {
    xSleep() {
      this.drawbarChart();
    },
    ySleep() {
      this.drawbarChart();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.drawbarChart();
    });
  },
  beforeDestroy() {},
};
</script>
